<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="javascript/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css">
<link rel="stylesheet" href="css/style.css">
<LINK REL="SHORTCUT ICON" HREF="images/icon.jpg"> 
<html>
<table width="750"  cellpadding="0" cellspacing="0" border="0" align="center">
	<c:forEach var="x" begin="0" end="${fn:length(data)-1}" step="1" varStatus ="status">
		<tr valign="top">
			<td width="20">&nbsp;</td>
			<td align="center">
				<c:if test="${fn:length(images)>1}">
					<div id="content">
						<c:forEach var="y" begin="0" end="${fn:length(images)-1}" step="1" varStatus ="status">
							<c:choose>
								<c:when test="${y==0}">
									<a id="link" rel="example_group" href="News_Event_Files/Back_Images/${images[y].IMAGE_FILE}" title="Lorem ipsum dolor sit amet"><img id="imageshow" src="News_Event_Files/Back_Images/${images[y].IMAGE_FILE}" height=180px width=200px border="0"></a>	
								</c:when>
								<c:otherwise>
									<a id="link" rel="example_group" style="visibility:hidden;float: left;position: absolute;" href="News_Event_Files/Back_Images/${images[y].IMAGE_FILE}" title="Lorem ipsum dolor sit amet"><img id="imageshow" src="News_Event_Files/Back_Images/${images[y].IMAGE_FILE}" height=180px width=200px></a>
								</c:otherwise>
							</c:choose>
						</c:forEach>
						<c:forEach var="i" begin="0" end="${fn:length(images)-1}" step="1" varStatus ="status">
							<span onclick='javascript:ChangeImage("News_Event_Files/Back_Images/${images[i].IMAGE_FILE}",${i},${fn:length(images)-1})' style="width:8px;border: solid 1px #999999;cursor: pointer; color:#006699;">&nbsp;<c:out value="${i+1}"/>&nbsp;</span>
						</c:forEach>
					</div>
				</c:if>
			</td>
			<td align="left" style="padding-left: 20px;">
				<b style="font-size: 14px;"><c:out value="${data[x].NEWS_TITLE}"/></b><br/>
				<p align="justify"><c:out value="${data[x].NEWS_DESC}"/></p>
			</td>
			<td width="10">&nbsp;</td>
		</tr>		
	</c:forEach>
	<tr>
		<td colspan="3" align="right"><a href="news_events.html">Go back</a></td>
		<td width="10">&nbsp;</td>
	</tr>
	<tr><td colspan="4" height="20">&nbsp;</td></tr>
</table>
</html>